import React, { Component } from 'react'
import UserChild from './UserChild';

export default class Userinfo extends Component {
  // props和state的区别：1.state是组件内部自己的数据，props是父组件传进来的数据；2.state可以通过setState函数修改，props是read only property
  constructor(props) {
    super(props);
    // 在构造函数中使用props时，需要先传值
    console.log(111, this.props);
    this.state = {
      age: this.props.age,
      msg: ''
    }
  }
  setAge() {
    // read only property 只读属性，不能修改
    this.props.age++
  }
  // 子传父的运载工具
  car(val) {
    // console.log('子传父的数据：', val);
    this.setState({
      msg: val
    })
  }
  render() {
    // console.log(111, this.props);
    // 接受props中的数据
    let {age, name} = this.props;
    return (
      <div>
        <p>用户信息</p>
        <p>age:{age}</p>
        <p>name:{name}</p>
        {/* 子传父：先父传给子一个函数，在子组件中调用函数时，携带数据返回父组件 */}
        <UserChild car={(val)=>this.car(val)}></UserChild>
        <p>子传父的数据：{this.state.msg}</p>
      </div>
    )
  }
}
